<template>
  <div>
   <el-row style="height: 89px; background-color: #00BBFF">
      <el-col :span="3" class="text-center pt-4 pb-3">
        <span class="fs-4">校园答疑互动平台</span>
      </el-col>
      <el-col :span="2" class="text-center pt-4 pb-4">
        <el-button type="primary" class="pt-3 pb-3 fs-4" round>首页</el-button>
      </el-col>
      <el-col :span="2" class="text-left pt-4 pb-4">
        <el-button type="primary" class="pt-3 pb-3 fs-4" round>提问吧</el-button>
      </el-col>
      <el-col :span="6" class="text-left pt-4 pb-4">
        <el-input placeholder="请输入搜索内容">
          <template #append>
            <el-button type="Primary">
              <el-icon><search /></el-icon>
            </el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :span="1" class="text-center pt-4 pb-4">
        <el-font class="fs-5">天气</el-font>
      </el-col>
      <el-col :span="2" class="text-center pt-2 pb-2">
        <el-font class="fs-6">今日</el-font>
      </el-col>
      <el-col :span="2" class="text-center pt-2 pb-2">
        <el-font class="fs-6">明日</el-font>
      </el-col>
      <el-col :span="2" class="text-center pt-4 pb-4">
        <div v-if="loginstatus">
        <el-font>欢迎您</el-font>
        <img :src="headUrl" style="width:6rem;heighr:6rem "  @click="this.$router.push('/')">
      </div>
      <div v-else> 
        <el-button type="primary" class="pt-3 pb-3 fs-4" round @click="this.$router.push('/login')">登录</el-button>
      </div>
        
      </el-col>
      <el-col :span="2" class="text-center pt-4 pb-4">
        <el-dropdown split-button type="primary" style="w-100">
          个人信息
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>详细信息</el-dropdown-item>
              <el-dropdown-item @click="this.$router.push('/person')">修改信息</el-dropdown-item>
              <el-dropdown-item>安全设置</el-dropdown-item>
              <el-dropdown-item>我的提问</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
      <el-col :span="2" class="text-center pt-1 pb-2">
        <img src="@/assets/11.png" style="width: 5rem; height: 5rem">
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-container>
          <el-aside width="190px" style="height: 42rem" class="text-center border">
            <img src="@/assets/11.png" style="height: 70px; border-radius: 50%"/>
            <el-menu class="mx-3 px-3 border-0">
              <el-menu-item><el-icon ><UserFilled /></el-icon>个人信息</el-menu-item>
              <el-menu-item><el-icon><EditPen /></el-icon><router-link to="/HomeGeam">修改信息</router-link></el-menu-item>
            </el-menu>
          </el-aside>
          <el-container class="border">
            <el-header class="fs-1 mx-auto mt-5" style="width: 30rem; height: 7rem">个人信息页面</el-header>
            <el-row>
              <el-col :span="6" class="mx-auto">
                <el-card class="">
                  <el-main>姓名：张三</el-main>
                  <el-main>性别：男</el-main>
                  <el-main>手机：123xxx123</el-main>
                  <el-main>积分：9999</el-main>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card class="w-50" style="height: 18.5rem">
                  <el-main>昵称：</el-main>
                  <el-main>出生日期：</el-main>
                  <el-main>邮件：</el-main>
                </el-card>
              </el-col>
            </el-row>
          </el-container>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { UserFilled, EditPen } from "@element-plus/icons-vue";
export default {
  name: "HomeAnXin",
  components: {
    UserFilled,
    EditPen,
  },

};
</script>
 
<style>
</style>